<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" placeholder="请输入标题" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="副标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subTitle">
              <a-input v-model="model.subTitle" placeholder="请输入副标题" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="点击路由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="routeIndex">
              <a-input placeholder="请输入路由地址" v-model="model.routeIndex">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="form路由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="formIndex">
              <a-input placeholder="请输入form路由地址" v-model="model.formIndex">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="app详情路由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appFormIndex">
              <a-input placeholder="请输入app详情路由" v-model="model.appFormIndex">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="pc路由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pcFormIndex">
              <a-input placeholder="请输入pc路由" v-model="model.pcFormIndex">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="流程id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processId">
              <a-input placeholder="请输入流程id" v-model="model.processId">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="bean实例" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="beanName">
              <a-input placeholder="请输入bean实例" v-model="model.beanName">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="flowCode" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flowCode">
              <a-input placeholder="请输入flowCode" v-model="model.flowCode">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="菜单分组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-dict-select-tag type="list" v-model="model.type" dictCode="app_deform_type" placeholder="请选择菜单分组" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否开启" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-switch v-model="model.status" :options="[1,2]"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图标配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-model="iconConfig" button-style="solid">
                <a-radio-button value="1">图标库选择</a-radio-button>
                <a-radio-button value="2">自定义上传 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="iconConfig=='1'">
            <a-form-model-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <div class="img_div" v-if="model.icon">
                <img :src="model.icon" style="width:60px;height:60px">
                <div class="mask" >
                  <a-icon type="delete" @click="deleteIcon" style="font-size: 20px;margin-top: 20px;"/>
                </div>
              </div>
              <div class="add" @click="selectIcons" v-if="!model.icon"></div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="iconConfig=='2'">
            <a-form-model-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload v-model="model.icon" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" placeholder="请输入排序" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="数据库表名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableName">
              <a-input v-model="model.tableName" placeholder="请输入数据库表名" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="删除api" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="delApi">
              <a-input v-model="model.delApi" placeholder="请输入删除api" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="详情api" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="detailApi">
              <a-input v-model="model.detailApi" placeholder="请输入详情api"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
              <a-textarea v-model="model.description" rows="2" placeholder="请输入描述" :max-length="200" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="4" placeholder="请输入备注" :max-length="200" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 选择图标 -->
      <app-icons ref="appicon" @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></app-icons>
      <!-- 选择路由 -->
      <app-route-modal ref="appRoute" @choose="handleRouteChoose" @close="handleRouteCancel" :appRouteVisible="appRouteVisible"></app-route-modal>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import AppIcons from './AppIcons'
  import AppRouteModal from './AppRouteModal'

  export default {
    name: 'SysAppRouteForm',
    components: {
      AppIcons,
      AppRouteModal
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
          title: [{ required: true, message: '请输入名称!' }],
          type: [{ required: true, message: '请选择菜单分组!' }],
          routeIndex: [{ required: true, message: '请输入路由地址!' }],
          formIndex: [{ required: true, message: '请输入form路由地址!' }]
        },
        iconChooseVisible: false,
        appRouteVisible: false,
        iconConfig: '1',
        url: {
          add: '/api/erp/eoa/sysAppRoute/add',
          edit: '/api/erp/eoa/sysAppRoute/edit',
          queryById: '/api/erp/eoa/sysAppRoute/queryById'
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.modelDefault.icon = '';
        this.modelDefault.routeIndex = '';
        this.modelDefault.status = '1';
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
               method = 'put';
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                if (!that.model.id) {
                  that.model = res.result;
                }
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      selectIcons() {
        this.iconChooseVisible = true
      },
      selectRoute() {
        this.appRouteVisible = true
        this.$nextTick(() => {
          this.$refs.appRoute.initTableData();
        })
      },
      handleIconChoose (value) {
        this.model.icon = value
        this.iconChooseVisible = false
      },
      handleRouteChoose (value) {
        this.appRouteVisible = false
        this.model.routeIndex = value;
        this.$nextTick(() => {
          this.$refs.form.validateField(['routeIndex']);
        })
      },
      handleIconCancel () {
        this.iconChooseVisible = false
      },
      handleRouteCancel () {
        this.appRouteVisible = false
      },
      deleteIcon() {
        this.model.icon = ''
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      syncForm (id) {
        if (this.model.id) {
          if (!id) {
            // 拖拽后更新表单的排序
            getAction(this.url.queryById, { id: this.model.id }).then((res) => {
              if (res.success && res.result) {
                  this.model.sort = res.result.sort;
                  this.model.type = res.result.type;
              }
            })
          }
          // 删除后重置表单
          if (id && this.model.id == id) {
            this.model = {};
          }
        }
      }
    }
  }
</script>
<style scoped>
  .img_div {
    position: relative;
    width: 60px;
    height: 60px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }
  .mask{
    text-align: center;
  }
  .img_div .mask:hover {
    opacity: 1;
  }
  .add {
    border: 1px solid;
    width: 60px;
    height: 60px;
    color: #ccc;
    transition: color .25s;
    position: relative;
  }
  .add::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    margin-left: -15px;
    border-top: 2px solid;
  }
  .add::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 30px;
    margin-top: -15px;
    border-left: 2px solid;
  }

</style>
